[license-img]: https://img.shields.io/github/license/HuolalaTech/page-spy-web?label=License
[license-url]: https://github.com/HuolalaTech/page-spy-web/blob/main/LICENSE
[sdk-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-plugin-ospy?label=OSpy&color=white
[sdk-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-plugin-ospy

import Icon from '@ant-design/icons';
import Logo from '@/assets/image/o-spy.svg?react';
import workflow from '@/assets/image/screenshot/ospy-workflow.en.png';
import { Link } from 'react-router-dom';

<div align="center">
  <Icon component={Logo} style={{ fontSize: 100, color: '#fff' }} />
  <h1>O-Spy</h1>
  <h5>오프라인 기록, 완벽한 재생.</h5>
</div>

<div className='badges'>
  [![SDK version][sdk-ver-img]][sdk-ver-url]
  [![license][license-img]][license-url]
</div>

## O-Spy란?#what-is-ospy

O-Spy(발음 /əʊ spaɪ/, **"Oh-Spy"**와 유사)는 프로그램 실행 데이터의 **오프라인 기록**에 중점을 둔 경량 웹 디버깅 도구입니다. 서버 배포가 필요 없으며, 모든 데이터는 로컬에 저장되고, 완전한 재생 디버깅을 지원합니다. [데모 보기](/o-spy?url=demo)

핵심 기능:

- 🚀 **무배포**: 서버 설정 불필요, 즉시 사용 가능
- 📦 **로컬 저장소**: 데이터가 업로드되지 않아 프라이버시 보호
- 🎬 **완전한 재생**: 녹화를 보는 것처럼 문제 시나리오 재현
- 🎨 **맞춤 설정 가능**: 테마와 버튼 스타일을 자유롭게 구성

워크플로우:

<a href={workflow} target="_blank">
  <img src={workflow} style={{width: '100%'}} />
</a>

## 빠른 시작#quick-start

단 3단계로 O-Spy의 강력한 기능을 경험할 수 있습니다.

### 1단계: O-Spy 도입#step-1

O-Spy는 프레임워크와 무관하며 여러 가지 도입 방법을 지원합니다. 원하는 방법을 선택하세요:

import { ImportGuide } from '@/pages/OSpy/components/ImportGuide';

<ImportGuide showConfig={false} />

도입에 성공하면 페이지 우측 하단에 드래그 가능한 "O-Spy" 버튼이 나타납니다. 클릭해서 시도해보세요 :)

import { CallOSpy } from '../md-components/CallOSPy';

<CallOSpy />

### 2단계: 데이터 생성 및 내보내기#step-2

데모를 위해 현재 페이지에는 이미 O-Spy가 통합되어 있습니다. 실제 사용 시나리오를 시뮬레이션하여 디버깅 데이터를 생성해 보겠습니다:

import { MakeData } from '../md-components/MakeData'

<MakeData />

위 버튼을 클릭하여 데이터를 생성한 후 다음 단계에 따라 내보내세요:

1. 우측 하단의 O-Spy 플로팅 버튼을 클릭하여 작업 패널 열기
2. **"로그 내보내기"** 버튼 클릭
3. 브라우저가 자동으로 `.json` 형식의 로그 파일을 다운로드합니다

> 💡 **팁**: 내보낸 JSON 파일에는 콘솔 로그, 네트워크 요청, 페이지 상호작용 등 페이지의 모든 실행 데이터가 포함되어 있습니다.

### 3단계: 재생 및 디버그#step-3

이제 방금 내보낸 데이터를 재생해 봅시다:

1. <Link to="/o-spy?url=" target='_blank'>재생 페이지</Link>로 이동
2. 좌측 상단의 **"로그 선택"** 버튼 클릭
3. 방금 내보낸 JSON 파일 선택
4. 재생을 시작하고 완전한 실행 프로세스를 확인하세요!

축하합니다! O-Spy의 기본 사용법을 마스터했습니다 🎉 